<template>
  <div class="course-detail-page">
    <!-- 课程头部信息 -->
    <div class="course-header" v-if="course">
      <div class="container">
        <Breadcrumb :items="breadcrumbItems" />
        
        <div class="header-content">
          <div class="course-info">
            <div class="course-meta">
              <el-tag
                v-for="tag in course.tags"
                :key="tag"
                size="small"
                class="course-tag"
              >
                {{ tag }}
              </el-tag>
              <span class="course-difficulty">
                {{ getDifficultyLabel(course.difficulty) }}
              </span>
            </div>
            
            <h1 class="course-title">{{ course.title }}</h1>
            <p class="course-subtitle">{{ course.subtitle }}</p>
            
            <div class="course-stats">
              <div class="stat-item">
                <el-icon><User /></el-icon>
                <span>{{ course.enrollCount }}人学习</span>
              </div>
              <div class="stat-item">
                <el-icon><Star /></el-icon>
                <span>{{ course.rating }}</span>
                <el-rate
                  v-model="course.rating"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                />
              </div>
              <div class="stat-item">
                <el-icon><Clock /></el-icon>
                <span>{{ formatDuration(course.duration) }}</span>
              </div>
              <div class="stat-item">
                <el-icon><Calendar /></el-icon>
                <span>{{ formatDate(course.updatedAt) }}更新</span>
              </div>
            </div>
            
            <div class="instructor-info">
              <el-avatar
                :src="course.instructor.avatar"
                :size="40"
                class="instructor-avatar"
              >
                {{ course.instructor.name.charAt(0) }}
              </el-avatar>
              <div class="instructor-details">
                <div class="instructor-name">{{ course.instructor.name }}</div>
                <div class="instructor-title">{{ course.instructor.title }}</div>
              </div>
            </div>
          </div>
          
          <div class="course-actions">
            <div class="course-preview">
              <div class="preview-container">
                <img
                  :src="course.cover"
                  :alt="course.title"
                  class="course-cover"
                />
                <div class="play-overlay" @click="playPreview">
                  <el-icon :size="60" color="#fff">
                    <VideoPlay />
                  </el-icon>
                  <span class="play-text">预览课程</span>
                </div>
              </div>
            </div>
            
            <div class="price-section">
              <div class="price-info">
                <span class="current-price">
                  {{ course.price === 0 ? '免费' : `¥${course.price}` }}
                </span>
                <span
                  v-if="course.originalPrice && course.originalPrice > course.price"
                  class="original-price"
                >
                  ¥{{ course.originalPrice }}
                </span>
              </div>
              
              <div class="action-buttons">
                <el-button
                  v-if="!isEnrolled"
                  type="primary"
                  size="large"
                  :loading="enrolling"
                  @click="handleEnroll"
                >
                  {{ course.price === 0 ? '免费学习' : '立即购买' }}
                </el-button>
                
                <el-button
                  v-else
                  type="success"
                  size="large"
                  @click="continueLearning"
                >
                  继续学习
                </el-button>
                
                <el-button
                  size="large"
                  :icon="isFavorited ? Star : StarFilled"
                  :type="isFavorited ? 'warning' : 'default'"
                  @click="toggleFavorite"
                >
                  {{ isFavorited ? '已收藏' : '收藏' }}
                </el-button>
              </div>
              
              <div class="course-features">
                <div class="feature-item">
                  <el-icon><Document /></el-icon>
                  <span>{{ course.lessonCount }}个课时</span>
                </div>
                <div class="feature-item">
                  <el-icon><Download /></el-icon>
                  <span>支持离线下载</span>
                </div>
                <div class="feature-item">
                  <el-icon><Medal /></el-icon>
                  <span>完成获得证书</span>
                </div>
                <div class="feature-item">
                  <el-icon><Service /></el-icon>
                  <span>讲师答疑</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 课程内容 -->
    <div class="course-content" v-if="course">
      <div class="container">
        <div class="content-layout">
          <!-- 主要内容 -->
          <div class="main-content">
            <el-tabs v-model="activeTab" class="course-tabs">
              <!-- 课程介绍 -->
              <el-tab-pane label="课程介绍" name="overview">
                <div class="course-overview">
                  <div class="section">
                    <h3 class="section-title">课程描述</h3>
                    <div class="course-description" v-html="course.description"></div>
                  </div>
                  
                  <div class="section">
                    <h3 class="section-title">学习目标</h3>
                    <ul class="learning-objectives">
                      <li
                        v-for="objective in course.objectives"
                        :key="objective"
                      >
                        <el-icon><Check /></el-icon>
                        <span>{{ objective }}</span>
                      </li>
                    </ul>
                  </div>
                  
                  <div class="section">
                    <h3 class="section-title">适合人群</h3>
                    <ul class="target-audience">
                      <li
                        v-for="audience in course.targetAudience"
                        :key="audience"
                      >
                        <el-icon><User /></el-icon>
                        <span>{{ audience }}</span>
                      </li>
                    </ul>
                  </div>
                  
                  <div class="section">
                    <h3 class="section-title">前置要求</h3>
                    <ul class="prerequisites">
                      <li
                        v-for="prerequisite in course.prerequisites"
                        :key="prerequisite"
                      >
                        <el-icon><InfoFilled /></el-icon>
                        <span>{{ prerequisite }}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </el-tab-pane>
              
              <!-- 课程目录 -->
              <el-tab-pane label="课程目录" name="curriculum">
                <div class="course-curriculum">
                  <div class="curriculum-header">
                    <div class="curriculum-stats">
                      <span>共{{ course.chapters.length }}章</span>
                      <span>{{ course.lessonCount }}个课时</span>
                      <span>{{ formatDuration(course.duration) }}</span>
                    </div>
                  </div>
                  
                  <div class="curriculum-content">
                    <div
                      v-for="(chapter, chapterIndex) in course.chapters"
                      :key="chapter.id"
                      class="chapter-item"
                    >
                      <div class="chapter-header" @click="toggleChapter(chapterIndex)">
                        <div class="chapter-info">
                          <el-icon class="expand-icon" :class="{ expanded: expandedChapters.includes(chapterIndex) }">
                            <ArrowRight />
                          </el-icon>
                          <span class="chapter-title">第{{ chapterIndex + 1 }}章 {{ chapter.title }}</span>
                        </div>
                        <div class="chapter-meta">
                          <span>{{ chapter.lessons.length }}课时</span>
                          <span>{{ formatDuration(chapter.duration) }}</span>
                        </div>
                      </div>
                      
                      <el-collapse-transition>
                        <div
                          v-show="expandedChapters.includes(chapterIndex)"
                          class="chapter-lessons"
                        >
                          <div
                            v-for="(lesson, lessonIndex) in chapter.lessons"
                            :key="lesson.id"
                            class="lesson-item"
                            :class="{ 
                              'is-free': lesson.isFree,
                              'is-completed': lesson.isCompleted,
                              'is-current': lesson.isCurrent
                            }"
                            @click="playLesson(lesson)"
                          >
                            <div class="lesson-info">
                              <el-icon class="lesson-icon">
                                <VideoPlay v-if="lesson.type === 'video'" />
                                <Document v-else-if="lesson.type === 'document'" />
                                <EditPen v-else-if="lesson.type === 'quiz'" />
                                <Folder v-else />
                              </el-icon>
                              <span class="lesson-title">{{ lesson.title }}</span>
                              <el-tag v-if="lesson.isFree" size="small" type="success">
                                免费
                              </el-tag>
                            </div>
                            <div class="lesson-meta">
                              <span class="lesson-duration">{{ formatDuration(lesson.duration) }}</span>
                              <el-icon v-if="lesson.isCompleted" class="completed-icon">
                                <CircleCheckFilled />
                              </el-icon>
                            </div>
                          </div>
                        </div>
                      </el-collapse-transition>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              
              <!-- 评价 -->
              <el-tab-pane label="学员评价" name="reviews">
                <div class="course-reviews">
                  <div class="reviews-summary">
                    <div class="rating-overview">
                      <div class="overall-rating">
                        <span class="rating-score">{{ course.rating }}</span>
                        <el-rate
                          v-model="course.rating"
                          disabled
                          show-score
                          text-color="#ff9900"
                        />
                        <span class="rating-count">{{ course.reviewCount }}条评价</span>
                      </div>
                      
                      <div class="rating-breakdown">
                        <div
                          v-for="(count, star) in course.ratingBreakdown"
                          :key="star"
                          class="rating-bar"
                        >
                          <span class="star-label">{{ star }}星</span>
                          <el-progress
                            :percentage="(count / course.reviewCount) * 100"
                            :show-text="false"
                            :stroke-width="8"
                          />
                          <span class="count">{{ count }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div class="reviews-list">
                    <div class="reviews-filter">
                      <el-radio-group v-model="reviewFilter" @change="filterReviews">
                        <el-radio-button label="all">全部</el-radio-button>
                        <el-radio-button label="5">5星</el-radio-button>
                        <el-radio-button label="4">4星</el-radio-button>
                        <el-radio-button label="3">3星</el-radio-button>
                        <el-radio-button label="2">2星</el-radio-button>
                        <el-radio-button label="1">1星</el-radio-button>
                      </el-radio-group>
                    </div>
                    
                    <div class="review-items">
                      <div
                        v-for="review in filteredReviews"
                        :key="review.id"
                        class="review-item"
                      >
                        <div class="review-header">
                          <el-avatar
                            :src="review.user.avatar"
                            :size="40"
                            class="user-avatar"
                          >
                            {{ review.user.name.charAt(0) }}
                          </el-avatar>
                          <div class="review-meta">
                            <div class="user-name">{{ review.user.name }}</div>
                            <div class="review-info">
                              <el-rate
                                v-model="review.rating"
                                disabled
                                :size="16"
                              />
                              <span class="review-date">{{ formatDate(review.createdAt) }}</span>
                            </div>
                          </div>
                        </div>
                        <div class="review-content">{{ review.content }}</div>
                        <div class="review-actions">
                          <el-button
                            text
                            :icon="ThumbsUp"
                            @click="likeReview(review.id)"
                          >
                            {{ review.likeCount }}
                          </el-button>
                        </div>
                      </div>
                    </div>
                    
                    <div class="reviews-pagination">
                      <el-pagination
                        v-model:current-page="reviewPage"
                        :total="totalReviews"
                        :page-size="10"
                        layout="prev, pager, next"
                        @current-change="loadReviews"
                      />
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          
          <!-- 侧边栏 -->
          <div class="sidebar">
            <!-- 讲师信息 -->
            <div class="instructor-card">
              <div class="card-header">
                <h3>讲师介绍</h3>
              </div>
              <div class="card-content">
                <div class="instructor-profile">
                  <el-avatar
                    :src="course.instructor.avatar"
                    :size="60"
                    class="instructor-avatar"
                  >
                    {{ course.instructor.name.charAt(0) }}
                  </el-avatar>
                  <div class="instructor-info">
                    <div class="instructor-name">{{ course.instructor.name }}</div>
                    <div class="instructor-title">{{ course.instructor.title }}</div>
                  </div>
                </div>
                <div class="instructor-bio">{{ course.instructor.bio }}</div>
                <div class="instructor-stats">
                  <div class="stat-item">
                    <span class="stat-value">{{ course.instructor.courseCount }}</span>
                    <span class="stat-label">门课程</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-value">{{ course.instructor.studentCount }}</span>
                    <span class="stat-label">名学员</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-value">{{ course.instructor.rating }}</span>
                    <span class="stat-label">评分</span>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 相关课程 -->
            <div class="related-courses">
              <div class="card-header">
                <h3>相关课程</h3>
              </div>
              <div class="card-content">
                <div
                  v-for="relatedCourse in relatedCourses"
                  :key="relatedCourse.id"
                  class="related-course-item"
                  @click="viewCourse(relatedCourse.id)"
                >
                  <img
                    :src="relatedCourse.cover"
                    :alt="relatedCourse.title"
                    class="course-thumb"
                  />
                  <div class="course-info">
                    <div class="course-title">{{ relatedCourse.title }}</div>
                    <div class="course-meta">
                      <span class="price">
                        {{ relatedCourse.price === 0 ? '免费' : `¥${relatedCourse.price}` }}
                      </span>
                      <el-rate
                        v-model="relatedCourse.rating"
                        disabled
                        :size="12"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <Loading />
    </div>
    
    <!-- 预览视频对话框 -->
    <el-dialog
      v-model="previewVisible"
      title="课程预览"
      width="80%"
      :before-close="closePreview"
    >
      <div class="preview-player">
        <video
          ref="previewPlayer"
          :src="course?.previewVideo"
          controls
          width="100%"
          height="400"
        >
          您的浏览器不支持视频播放
        </video>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  User, Star, StarFilled, Clock, Calendar, VideoPlay, Document, Download,
  Medal, Service, Check, InfoFilled, ArrowRight, EditPen, Folder,
  CircleCheckFilled, ThumbsUp
} from '@element-plus/icons-vue'
import { useCourseStore } from '@/stores/course'
import { useUserStore } from '@/stores/user'
import Breadcrumb from '@/components/common/Breadcrumb.vue'
import Loading from '@/components/common/Loading.vue'
import { formatDate, formatDuration } from '@/utils/format'

const router = useRouter()
const route = useRoute()
const courseStore = useCourseStore()
const userStore = useUserStore()

// 响应式数据
const loading = ref(true)
const enrolling = ref(false)
const course = ref(null)
const relatedCourses = ref([])
const activeTab = ref('overview')
const expandedChapters = ref([0]) // 默认展开第一章
const previewVisible = ref(false)
const previewPlayer = ref(null)

// 评价相关
const reviewFilter = ref('all')
const reviewPage = ref(1)
const reviews = ref([])
const filteredReviews = ref([])
const totalReviews = ref(0)

// 面包屑导航
const breadcrumbItems = computed(() => {
  const items = [
    { title: '首页', path: '/' },
    { title: '课程中心', path: '/courses' }
  ]
  
  if (course.value) {
    items.push({
      title: course.value.title,
      path: `/courses/${course.value.id}`
    })
  }
  
  return items
})

// 计算属性
const isEnrolled = computed(() => {
  return course.value && userStore.myCourses.some(c => c.id === course.value.id)
})

const isFavorited = computed(() => {
  return course.value && userStore.favoriteCourses.some(c => c.id === course.value.id)
})

// 方法
const fetchCourseDetail = async (courseId) => {
  try {
    loading.value = true
    await courseStore.fetchCourseDetail(courseId)
    course.value = courseStore.courseDetail
    
    // 获取相关课程
    await fetchRelatedCourses()
    
    // 获取评价
    await loadReviews()
  } catch (error) {
    ElMessage.error('获取课程详情失败')
    console.error('获取课程详情失败:', error)
  } finally {
    loading.value = false
  }
}

const fetchRelatedCourses = async () => {
  try {
    if (course.value) {
      await courseStore.fetchRelatedCourses(course.value.id)
      relatedCourses.value = courseStore.relatedCourses
    }
  } catch (error) {
    console.error('获取相关课程失败:', error)
  }
}

const loadReviews = async () => {
  try {
    if (course.value) {
      const params = {
        courseId: course.value.id,
        page: reviewPage.value,
        rating: reviewFilter.value !== 'all' ? reviewFilter.value : null
      }
      
      await courseStore.fetchCourseReviews(params)
      reviews.value = courseStore.courseReviews
      totalReviews.value = courseStore.reviewTotal
      filterReviews()
    }
  } catch (error) {
    console.error('获取课程评价失败:', error)
  }
}

const filterReviews = () => {
  if (reviewFilter.value === 'all') {
    filteredReviews.value = reviews.value
  } else {
    filteredReviews.value = reviews.value.filter(
      review => review.rating === parseInt(reviewFilter.value)
    )
  }
}

const getDifficultyLabel = (difficulty) => {
  const difficultyMap = {
    beginner: '入门',
    elementary: '初级',
    intermediate: '中级',
    advanced: '高级',
    expert: '专家'
  }
  return difficultyMap[difficulty] || difficulty
}

const handleEnroll = async () => {
  try {
    if (!userStore.isLoggedIn) {
      ElMessage.warning('请先登录')
      router.push('/login')
      return
    }
    
    if (course.value.price === 0) {
      // 免费课程直接报名
      enrolling.value = true
      await courseStore.enrollCourse(course.value.id)
      ElMessage.success('报名成功')
    } else {
      // 付费课程跳转到支付页面
      router.push(`/payment?courseId=${course.value.id}`)
    }
  } catch (error) {
    ElMessage.error(error.message || '报名失败')
  } finally {
    enrolling.value = false
  }
}

const continueLearning = () => {
  router.push(`/learn/${course.value.id}`)
}

const toggleFavorite = async () => {
  try {
    if (!userStore.isLoggedIn) {
      ElMessage.warning('请先登录')
      router.push('/login')
      return
    }
    
    if (isFavorited.value) {
      await courseStore.unfavoriteCourse(course.value.id)
      ElMessage.success('已取消收藏')
    } else {
      await courseStore.favoriteCourse(course.value.id)
      ElMessage.success('已添加到收藏')
    }
  } catch (error) {
    ElMessage.error(error.message || '操作失败')
  }
}

const playPreview = () => {
  if (course.value?.previewVideo) {
    previewVisible.value = true
    nextTick(() => {
      if (previewPlayer.value) {
        previewPlayer.value.play()
      }
    })
  } else {
    ElMessage.info('暂无预览视频')
  }
}

const closePreview = () => {
  if (previewPlayer.value) {
    previewPlayer.value.pause()
  }
  previewVisible.value = false
}

const toggleChapter = (chapterIndex) => {
  const index = expandedChapters.value.indexOf(chapterIndex)
  if (index > -1) {
    expandedChapters.value.splice(index, 1)
  } else {
    expandedChapters.value.push(chapterIndex)
  }
}

const playLesson = (lesson) => {
  if (lesson.isFree || isEnrolled.value) {
    router.push(`/learn/${course.value.id}/${lesson.id}`)
  } else {
    ElMessage.warning('请先报名课程')
  }
}

const likeReview = async (reviewId) => {
  try {
    await courseStore.likeReview(reviewId)
    // 更新评价点赞数
    const review = reviews.value.find(r => r.id === reviewId)
    if (review) {
      review.likeCount += 1
    }
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

const viewCourse = (courseId) => {
  router.push(`/courses/${courseId}`)
}

// 监听路由变化
watch(
  () => route.params.id,
  (newId) => {
    if (newId) {
      fetchCourseDetail(newId)
    }
  },
  { immediate: true }
)

// 监听评价筛选
watch(reviewFilter, () => {
  reviewPage.value = 1
  loadReviews()
})

// 生命周期
onMounted(() => {
  const courseId = route.params.id
  if (courseId) {
    fetchCourseDetail(courseId)
  }
})
</script>

<style lang="scss" scoped>
.course-detail-page {
  min-height: 100vh;
  background: var(--el-bg-color-page);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

// 课程头部
.course-header {
  background: var(--el-bg-color);
  padding: 20px 0 40px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  
  .header-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    margin-top: 20px;
    
    .course-info {
      .course-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        
        .course-tag {
          background: var(--el-color-primary-light-9);
          color: var(--el-color-primary);
          border: none;
        }
        
        .course-difficulty {
          padding: 4px 8px;
          background: var(--el-color-warning-light-9);
          color: var(--el-color-warning);
          border-radius: 4px;
          font-size: 12px;
        }
      }
      
      .course-title {
        font-size: 2.2rem;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin-bottom: 12px;
        line-height: 1.3;
      }
      
      .course-subtitle {
        font-size: 1.1rem;
        color: var(--el-text-color-regular);
        margin-bottom: 24px;
        line-height: 1.5;
      }
      
      .course-stats {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-bottom: 24px;
        
        .stat-item {
          display: flex;
          align-items: center;
          gap: 6px;
          color: var(--el-text-color-regular);
          font-size: 14px;
          
          .el-icon {
            color: var(--el-color-primary);
          }
        }
      }
      
      .instructor-info {
        display: flex;
        align-items: center;
        gap: 12px;
        
        .instructor-details {
          .instructor-name {
            font-weight: 500;
            color: var(--el-text-color-primary);
            margin-bottom: 4px;
          }
          
          .instructor-title {
            font-size: 14px;
            color: var(--el-text-color-regular);
          }
        }
      }
    }
    
    .course-actions {
      .course-preview {
        margin-bottom: 24px;
        
        .preview-container {
          position: relative;
          border-radius: 8px;
          overflow: hidden;
          cursor: pointer;
          
          .course-cover {
            width: 100%;
            height: 225px;
            object-fit: cover;
          }
          
          .play-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s;
            
            .play-text {
              color: #fff;
              font-size: 14px;
              margin-top: 8px;
            }
            
            &:hover {
              opacity: 1;
            }
          }
        }
      }
      
      .price-section {
        background: var(--el-bg-color);
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 8px;
        padding: 24px;
        
        .price-info {
          margin-bottom: 20px;
          
          .current-price {
            font-size: 2rem;
            font-weight: 600;
            color: var(--el-color-danger);
          }
          
          .original-price {
            font-size: 1.2rem;
            color: var(--el-text-color-secondary);
            text-decoration: line-through;
            margin-left: 12px;
          }
        }
        
        .action-buttons {
          display: flex;
          gap: 12px;
          margin-bottom: 24px;
          
          .el-button {
            flex: 1;
          }
        }
        
        .course-features {
          .feature-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            color: var(--el-text-color-regular);
            font-size: 14px;
            
            .el-icon {
              color: var(--el-color-success);
            }
            
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
}

// 课程内容
.course-content {
  padding: 40px 0;
  
  .content-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    
    .main-content {
      .course-tabs {
        :deep(.el-tabs__header) {
          margin-bottom: 24px;
        }
        
        :deep(.el-tabs__nav-wrap::after) {
          display: none;
        }
      }
    }
  }
}

// 课程介绍
.course-overview {
  .section {
    margin-bottom: 32px;
    
    .section-title {
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--el-text-color-primary);
      margin-bottom: 16px;
    }
    
    .course-description {
      color: var(--el-text-color-regular);
      line-height: 1.6;
      
      :deep(p) {
        margin-bottom: 12px;
      }
      
      :deep(ul), :deep(ol) {
        margin-left: 20px;
        margin-bottom: 12px;
      }
    }
    
    .learning-objectives,
    .target-audience,
    .prerequisites {
      list-style: none;
      padding: 0;
      
      li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
        color: var(--el-text-color-regular);
        
        .el-icon {
          color: var(--el-color-success);
          margin-top: 2px;
          flex-shrink: 0;
        }
      }
    }
  }
}

// 课程目录
.course-curriculum {
  .curriculum-header {
    background: var(--el-bg-color-page);
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    
    .curriculum-stats {
      display: flex;
      gap: 24px;
      color: var(--el-text-color-regular);
      font-size: 14px;
    }
  }
  
  .curriculum-content {
    .chapter-item {
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 8px;
      margin-bottom: 12px;
      overflow: hidden;
      
      .chapter-header {
        background: var(--el-bg-color-page);
        padding: 16px 20px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background-color 0.3s;
        
        &:hover {
          background: var(--el-color-primary-light-9);
        }
        
        .chapter-info {
          display: flex;
          align-items: center;
          gap: 12px;
          
          .expand-icon {
            transition: transform 0.3s;
            
            &.expanded {
              transform: rotate(90deg);
            }
          }
          
          .chapter-title {
            font-weight: 500;
            color: var(--el-text-color-primary);
          }
        }
        
        .chapter-meta {
          display: flex;
          gap: 16px;
          color: var(--el-text-color-secondary);
          font-size: 14px;
        }
      }
      
      .chapter-lessons {
        .lesson-item {
          padding: 12px 20px;
          border-top: 1px solid var(--el-border-color-lighter);
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          align-items: center;
          transition: background-color 0.3s;
          
          &:hover {
            background: var(--el-bg-color-page);
          }
          
          &.is-free {
            .lesson-title {
              color: var(--el-color-success);
            }
          }
          
          &.is-completed {
            background: var(--el-color-success-light-9);
            
            .lesson-title {
              color: var(--el-color-success);
            }
          }
          
          &.is-current {
            background: var(--el-color-primary-light-9);
            
            .lesson-title {
              color: var(--el-color-primary);
            }
          }
          
          .lesson-info {
            display: flex;
            align-items: center;
            gap: 12px;
            
            .lesson-icon {
              color: var(--el-text-color-secondary);
            }
            
            .lesson-title {
              color: var(--el-text-color-primary);
            }
          }
          
          .lesson-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            
            .lesson-duration {
              color: var(--el-text-color-secondary);
              font-size: 14px;
            }
            
            .completed-icon {
              color: var(--el-color-success);
            }
          }
        }
      }
    }
  }
}

// 评价
.course-reviews {
  .reviews-summary {
    background: var(--el-bg-color-page);
    padding: 24px;
    border-radius: 8px;
    margin-bottom: 24px;
    
    .rating-overview {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 40px;
      
      .overall-rating {
        text-align: center;
        
        .rating-score {
          display: block;
          font-size: 3rem;
          font-weight: 600;
          color: var(--el-color-warning);
          margin-bottom: 8px;
        }
        
        .rating-count {
          display: block;
          color: var(--el-text-color-secondary);
          font-size: 14px;
          margin-top: 8px;
        }
      }
      
      .rating-breakdown {
        .rating-bar {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 8px;
          
          .star-label {
            width: 40px;
            font-size: 14px;
            color: var(--el-text-color-secondary);
          }
          
          .el-progress {
            flex: 1;
          }
          
          .count {
            width: 40px;
            text-align: right;
            font-size: 14px;
            color: var(--el-text-color-secondary);
          }
        }
      }
    }
  }
  
  .reviews-list {
    .reviews-filter {
      margin-bottom: 20px;
    }
    
    .review-items {
      .review-item {
        background: var(--el-bg-color);
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 16px;
        
        .review-header {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 12px;
          
          .review-meta {
            flex: 1;
            
            .user-name {
              font-weight: 500;
              color: var(--el-text-color-primary);
              margin-bottom: 4px;
            }
            
            .review-info {
              display: flex;
              align-items: center;
              gap: 12px;
              
              .review-date {
                color: var(--el-text-color-secondary);
                font-size: 14px;
              }
            }
          }
        }
        
        .review-content {
          color: var(--el-text-color-regular);
          line-height: 1.6;
          margin-bottom: 12px;
        }
        
        .review-actions {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
    
    .reviews-pagination {
      display: flex;
      justify-content: center;
      margin-top: 24px;
    }
  }
}

// 侧边栏
.sidebar {
  .instructor-card,
  .related-courses {
    background: var(--el-bg-color);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    margin-bottom: 24px;
    
    .card-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--el-border-color-lighter);
      
      h3 {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin: 0;
      }
    }
    
    .card-content {
      padding: 20px;
    }
  }
  
  .instructor-card {
    .instructor-profile {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      
      .instructor-info {
        .instructor-name {
          font-weight: 500;
          color: var(--el-text-color-primary);
          margin-bottom: 4px;
        }
        
        .instructor-title {
          color: var(--el-text-color-secondary);
          font-size: 14px;
        }
      }
    }
    
    .instructor-bio {
      color: var(--el-text-color-regular);
      line-height: 1.5;
      margin-bottom: 16px;
    }
    
    .instructor-stats {
      display: flex;
      justify-content: space-between;
      
      .stat-item {
        text-align: center;
        
        .stat-value {
          display: block;
          font-size: 1.2rem;
          font-weight: 600;
          color: var(--el-color-primary);
          margin-bottom: 4px;
        }
        
        .stat-label {
          color: var(--el-text-color-secondary);
          font-size: 12px;
        }
      }
    }
  }
  
  .related-courses {
    .related-course-item {
      display: flex;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--el-border-color-lighter);
      cursor: pointer;
      transition: background-color 0.3s;
      
      &:hover {
        background: var(--el-bg-color-page);
      }
      
      &:last-child {
        border-bottom: none;
      }
      
      .course-thumb {
        width: 60px;
        height: 40px;
        object-fit: cover;
        border-radius: 4px;
        flex-shrink: 0;
      }
      
      .course-info {
        flex: 1;
        
        .course-title {
          font-size: 14px;
          color: var(--el-text-color-primary);
          margin-bottom: 6px;
          line-height: 1.3;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .course-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .price {
            color: var(--el-color-danger);
            font-weight: 500;
            font-size: 14px;
          }
        }
      }
    }
  }
}

// 加载状态
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

// 预览播放器
.preview-player {
  text-align: center;
  
  video {
    border-radius: 8px;
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .course-header {
    .header-content {
      grid-template-columns: 1fr;
      gap: 24px;
      
      .course-actions {
        order: -1;
        
        .course-preview {
          .preview-container {
            .course-cover {
              height: 200px;
            }
          }
        }
      }
    }
  }
  
  .course-content {
    .content-layout {
      grid-template-columns: 1fr;
      gap: 24px;
      
      .sidebar {
        order: -1;
        
        .instructor-card,
        .related-courses {
          display: inline-block;
          width: calc(50% - 12px);
          margin-right: 24px;
          vertical-align: top;
          
          &:nth-child(even) {
            margin-right: 0;
          }
        }
      }
    }
  }
  
  .course-reviews {
    .reviews-summary {
      .rating-overview {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
      }
    }
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
  
  .course-header {
    padding: 16px 0 24px;
    
    .header-content {
      .course-info {
        .course-title {
          font-size: 1.6rem;
        }
        
        .course-stats {
          flex-wrap: wrap;
          gap: 16px;
        }
      }
      
      .course-actions {
        .price-section {
          .action-buttons {
            flex-direction: column;
          }
        }
      }
    }
  }
  
  .course-content {
    padding: 24px 0;
    
    .content-layout {
      .sidebar {
        .instructor-card,
        .related-courses {
          display: block;
          width: 100%;
          margin-right: 0;
        }
      }
    }
  }
  
  .course-curriculum {
    .curriculum-content {
      .chapter-item {
        .chapter-header {
          padding: 12px 16px;
          
          .chapter-meta {
            flex-direction: column;
            gap: 4px;
            text-align: right;
          }
        }
        
        .chapter-lessons {
          .lesson-item {
            padding: 10px 16px;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            
            .lesson-meta {
              align-self: flex-end;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .course-header {
    .header-content {
      .course-info {
        .course-title {
          font-size: 1.4rem;
        }
        
        .course-stats {
          .stat-item {
            font-size: 12px;
          }
        }
      }
    }
  }
  
  .course-reviews {
    .reviews-filter {
      :deep(.el-radio-group) {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        
        .el-radio-button {
          margin-right: 0;
        }
      }
    }
  }
}
</style>